<template>
  <div class="editable-cell">
    <!-- <div v-if="editable" class="editable-cell-input-wrapper">
      <a-input :value="value" @change="handleChange" @pressEnter="check" />
      <a-icon v-if="!editStatus" type="check" class="editable-cell-icon-check" @click="check" />
    </div>
    <div v-else class="editable-cell-text-wrapper">
      {{ value || ' ' }}
      <a-icon type="edit" class="editable-cell-icon" @click="edit" />
    </div>-->
    <template v-if="!!record">
      <a-select
        placeholder="请选择"
        v-if="record.res.id === '_name'"
        v-model="selfNameValue"
        :options="selfNameOptions"
        @change="handleNameOptionsChange"
      ></a-select>
      <a-select
        placeholder="请选择"
        v-else-if="record.res.id === '_type'"
        v-model="selfTypeValue"
        :options="selfTypeOptions"
        @change="handleOptionsChange"
      ></a-select>
      <a-input
        placeholder="请输入"
        v-else-if="!isSelectChage"
        :value="value"
        @change="handleChange"
        @pressEnter="check"
      />
      <a-select
        placeholder="请选择"
        v-else-if="isSelectChage"
        v-model="selfChangeSelect"
        @change="handleOptionsChange"
        :options="enumsOptions[record.columnDef.dataIndex]"
      ></a-select>
    </template>
    <a-input placeholder="请输入" v-else :value="value" @change="handleChange" @pressEnter="check" />
  </div>
</template>

<script>
import { getFactorList, getFactorValueWithCode, getFactorWithCode } from './api/ruleApi'
import { matchingTypeLabel } from './model/RuleFactorValue'
export default {
  name: 'EditableCell',
  props: ['text', 'editStatus', 'record', 'isSelectChage', 'enumsOptions'],
  data() {
    return {
      selectRow: ['_name', '_type'],
      value: this.text,
      visible: false,
      editable: false,
      selfNameValue: this.text,
      selfTypeValue: this.text,
      selfChangeSelect: this.text,
      isEnumsKEY: '',
      enumsValue: [],
      isEnumsOptions: [],
      selfAgeOptions: [
        {
          value: '个人客服',
          label: '个人客服'
        },
        {
          value: '企业客服',
          label: '企业客服'
        },
        {
          value: '客服经理',
          label: '客服经理'
        }
      ],
      dataIndex: ''
    }
  },
  watch: {
    editStatus(val) {
      if (val) {
        this.edit()
      } else {
        this.check()
      }
    }
  },
  watch: {
    text(newVal) {
      this.selfNameValue = newVal
      this.selfTypeValue = newVal
      this.selfChangeSelect = newVal
      this.value = newVal
    }
  },
  computed: {
    selfTypeOptions() {
      const keys = Object.keys(matchingTypeLabel)
      return keys.map(key => ({ value: key, label: matchingTypeLabel[key] }))
    },
    selfNameOptions() {
      return getFactorList().map(item => ({ value: item.code, label: item.label }))
    }
  },
  mounted() {},
  methods: {
    handleOk() {},

    // nameOptions Function
    handleNameOptionsChange(value) {
      const { enumCode } = getFactorWithCode(value)
      this.$emit('change', value)
      this.$emit('changeValue', { enumCode, dataIndex: this.record.columnDef.dataIndex })
      console.log('====', this.selfChangeSelect)
      this.selfChangeSelect = ''
      this.$forceUpdate()
    },

    handleOptionsChange(value) {
      this.$emit('change', value)
    },

    handleChange(e) {
      this.value = e.target.value
      this.$emit('change', this.value)
    },
    check() {
      console.log('开始编辑')
      this.editable = false
      this.$emit('change', this.value)
    },
    edit() {
      this.editable = true
    }
  }
}
</script>
<style scoped>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}

.ant-input-number {
  width: 100%;
}

::v-deep .ant-select {
  width: 100%;
}
</style>
